<template>
  <div>
    <!-- 

  名门望族 张琼宇  用户页面

     -->
    <mbx />
    <el-card>
      <el-row style="margin-bottom: 10px;">
        <el-col :span="7">
          <el-input placeholder="请输入内容" class="input-with-select" v-model="query.query" @keyup.13="getlist()">
            <el-button slot="append" icon="el-icon-search" @click="getlist()"></el-button>
          </el-input>
        </el-col>
        <el-col :span="7" style="margin-left: 10px;">
          <el-button type="primary" @click="add">添加用户</el-button>
        </el-col>
      </el-row>
      <template>
        <el-table :data="list" border style="width: 100%">
          <el-table-column fixed prop="id" label="#">
          </el-table-column>
          <el-table-column prop="username" label="姓名">
          </el-table-column>
          <el-table-column prop="email" label="邮箱">
          </el-table-column>
          <el-table-column prop="mobile" label="电话">
          </el-table-column>
          <el-table-column prop="role_name" label="角色">
          </el-table-column>
          <el-table-column prop="mg_state" label="状态">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949" @change='changestate(scope.row)'>
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>

              <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>

              <el-button size="mini" type="warning" icon="el-icon-star-off" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- //! 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query.pagenum" :page-sizes="[2,3,4,5]" :page-size="query.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
      <!-- //! dialog -->
      <Dialog :mydialog="mydialog" :formdata="formdata" @update='getlist()' />
    </el-card>
  </div>
</template>

<script>
import { adduser, Del, swait } from '@/utils/userapi'
import mbx from '@/components/mbx.vue'
import Dialog from '@/components/usersmtk.vue'
export default {
  components: { mbx, Dialog },
  data() {
    return {
      list: [],
      query: {
        query: '',
        pagenum: 1,
        pagesize: 2
      },
      total: 0,
      mydialog: {
        flag: false,
        type: 'add',
        title: '添加用户'
      },
      formdata: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      }
    }
  },
  methods: {
    async getlist() {
      let res = await adduser(this.query)
      // console.log(res);
      this.list = res.data.users
      this.total = res.data.total
      //   console.log(this.list);
    },
    handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      this.query.pagesize = val
      this.getlist()
    },
    handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      this.query.pagenum = val
      this.getlist()
    },
    async del(id) {
      // console.log(id);
      let res = await Del(id)
      console.log(res);
      if (res.meta.status == 200) {
        this.$message.success(res.meta.msg)
        this.getlist()
      } else {
        this.$message.error(res.meta.msg)
      }
    },
    add() {
      (
        this.mydialog = {
          flag: true,
          title: '添加用户',
          type: 'add'
        }
      );
      (
        this.formdata = {
          username: '',
          password: '',
          email: '',
          mobile: ''
        }
      )
    },
    edit(info) {
      // console.log(info);
      this.mydialog = {
        flag: true,
        title: '修改用户',
        type: 'edit'
      }
      this.formdata = {
        username: info.username,
        password: info.password,
        email: info.email,
        mobile: info.mobile,
        id: info.id
      }
    },
    async changestate(row) {
      // console.log(row);
      let res = await swait(row.id, row.mg_state)
      if (res.meta.status == 200) {
        this.$message.success(res.meta.msg)
        this.getlist()
      }
    },
  },
  mounted() {
    this.getlist()
  },
}
</script>

<style>
</style>